<script setup lang="ts">
import { QTooltip, QSpace } from "quasar";

import { ComButtonIcon } from "../ComButton";

const vueProps = defineProps<{
  isBack?: boolean;
  backMessage?: string;
  customTitle?: string;
}>();

const emit = defineEmits<{
  (event: "back"): void;
}>();
/*************** HTML ***************/
/*************** HTML ***************/
/*************** HTML ***************/
/*************** HTML ***************/
</script>

<template>
  <div class="flex items-center gap-3">
    <ComButtonIcon v-if="vueProps.isBack" icon="arrow_back" @click="emit('back')">
      <q-tooltip class="text-lg">{{ vueProps.backMessage || "返回上页" }}</q-tooltip>
    </ComButtonIcon>

    <slot name="title">
      <span class="text-2xl">
        {{ vueProps.customTitle || $route.name }}
      </span>
    </slot>

    <q-space></q-space>
    <slot name="right"></slot>
  </div>
</template>

<style></style>
